<template>
    <!-- components/exchange-code/index.wxml -->
    <view class="exchange-code">
        <view v-if="info.code" class="code__number">{{ utils.encryptCode(info.code) }}</view>
        <view class="code__effective-date">有效期：{{ utils.formatDate(info.start_date) }} - {{ utils.formatDate(info.end_date) }}</view>
        <view class="btn-copy" @tap.stop.prevent="copyCode" :data-code="info.code">
            <view class="btn-title">复制</view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs">
var encryptCode = function (code) {
  /*
  位数13/14
  我们第6位开始加密
  例如：
  11111严禁交易11111（14位）
  11111严禁交易1111（13位）
  */
  if (9 < code.length) {
    return code.replace(code.substring(5, 25), '****');
  }
  return '兑换码错误';
}
var formatDate = function (date) {
  if (date) {
    var reg = getRegExp('-', 'g');
    return date.replace(reg, ".");
  }
  return date;
}
module.exports = {
  encryptCode: encryptCode,
  formatDate: formatDate
}
</script>
<script>
// components/exchange-code/index.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        info: Object
    },
    /**
     * 组件的方法列表
     */
    methods: {
        copyCode: function (e) {
            uni.setClipboardData({
                data: e.currentTarget.dataset.code
            });
        }
    }
};
</script>
<style lang="scss">
/* components/exchange-code/index.wxss */
.exchange-code {
    height: 114rpx;
    background: #f9f9f9;
    border-radius: 20rpx;
    position: relative;
    margin-top: 20rpx;
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.code__number {
    font-size: 30rpx;
    font-weight: 400;
    color: #000000;
}
.code__effective-date {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #666;
}
.btn-copy {
    width: 146rpx;
    height: 50rpx;
    border: 1px solid $uni-border-color-main;
    border-radius: 25rpx;
    position: absolute;
    top: 50%;
    right: 20rpx;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-copy .btn-title {
    font-size: 26rpx;
    color: $uni-text-color-main;
    text-align: center;
    line-height: 50rpx;
}
</style>
